import { useDispatch } from 'react-redux';
import { addArticle } from '../../store/slices/articles';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';

export default function () {
    const navigate = useNavigate();
    const dispatch = useDispatch()
    const [title, setTitle] = useState('')
    const [content, setContent] = useState('')

    const handleAddArticle = () => {
        dispatch(addArticle({ title, content }))
        navigate('/article/list')
    }

    return <div>
        title:<input type='text' value={title} onChange={e => setTitle(e.target.value)}></input>
        content:<input type='text' value={content} onChange={e => setContent(e.target.value)}></input>
        <button onClick={handleAddArticle}>add</button>
    </div>
}